<template>
	<view class="container">
		<!-- 中间对话框 -->
		<view>
			<scroll-view class="scroll" scroll-y="true" :scroll-top="top">
				<view class="chat-container">
					<view class="chat-item" v-for="(item,index) in messages" :key="index">
						<otherChat v-if="!item.isMe" :sendType="item.sendType" :text="item.msg" :img="item.msg">
						</otherChat>
						<selfChat v-else :sendType="item.sendType" :text="item.msg" :img="item.msg">
						</selfChat>
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 底部输入框 -->
		<view class="input-container">
			<textarea v-model="value" :show-confirm-bar="false" class="text" cursor-spacing="40"
				maxlength="500"></textarea>
			<view class="addimg" v-if="!value" @tap="sendImg">
				<view>+</view>
			</view>
			<view class="send" v-else @tap="sendText">发送</view>
		</view>
	</view>
</template>

<script>
	import selfChat from "@/components/self_chat/self_chat.vue"
	import otherChat from "@/components/other_chat/other_chat.vue"
	// 创建消息实例
	function msgType(sendType, msg, me) {
		this.sendType = sendType;
		this.msg = msg
		this.isMe = me
	}
	export default {
		data() {
			return {
				value: '',
				socketTask: null,
				messages: [],
				top: ''
			}
		},
		methods: {
			// 获取高度
			getHeight() {
				return new Promise((resolve, reject) => {
					//创建节点选择器
					var query = uni.createSelectorQuery();
					//选择id
					query.select('.chat-container').boundingClientRect()
					query.exec(function(res) {
						//res就是 所有标签为myText的元素的信息 的数组
						//取高度
						resolve(res[0].height);
					})
				})
			},
			// 发送消息
			sendText() {
				let that = this
				that.socketTask.send({
					data: that.value,
					success: async function(res) {
						if (res.errMsg == "sendSocketMessage:ok") {
							let msg = new msgType(1, that.value, true)
							that.messages.push(msg)
							that.value = ''
							let height = await that.getHeight()
							that.top = height
						}
					}
				})
			},
			// 选择图片
			chooseImg() {
				return new Promise((resolve, reject) => {
					uni.chooseImage({
						count: 1,
						success(res) {
							resolve(res)
						}
					})
				})
			},
			async sendImg() {
				let that = this
				let res = await that.chooseImg()
				let path = res.tempFilePaths[0]
				let msg = new msgType(2, path, true)
				that.messages.push(msg)
				let height = await that.getHeight()
				that.top = height
			},
		},
		async mounted() {
			console.log(1)
			let that = this
			// 刚开始打开页面如果没有消息就发送一条问候消息
			let messages = uni.getStorageSync('messages')
			if (!messages) {
				let msg = new msgType(1, '您好,我是小谱,请问有什么可以帮助您的吗?', false)
				that.messages.push(msg)
			} else {
				messages = JSON.parse(messages)
				that.messages = messages
			}
			// 一开始就连接
			const socketTask = uni.connectSocket({
				url: 'wss://192.168.43.224:3333',
				header: {
					'content-type': 'application/json'
				},
				method: "get",
			   success() {
			   	
			   }
			})
			console.log(socketTask,'socketTask');
			that.socketTask = socketTask;
			// 监听服务器发送的消息
			socketTask.onMessage(async (data) => {
				let info = data.data
				let msg = new msgType(1, info, false)
				that.messages.push(msg)
				uni.setStorageSync('messages', JSON.stringify(that.messages))
				let height = await that.getHeight()
				that.top = height
			})
		},
		components: {
			selfChat,
			otherChat
		},
	}
</script>

<style>
	page {
		background-color: #f4f4f5;
	}

	.container {
		background-color: #f4f4f5;
		width: 100%;
		box-sizing: border-box;
	}

	.input-container {
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 0;
		box-sizing: border-box;
		padding: 40rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #fff;
		border-top: 2rpx solid #e8e8e8
	}

	.text {
		flex: 0.9;
		height: 80rpx;
		box-sizing: border-box;
		padding: 20rpx;
		background-color: #f4f4f5;
	}

	.addimg {
		width: 80rpx;
		height: 80rpx;
		box-sizing: border-box;
		padding: 10rpx;
		border-radius: 50%;
		border: 4rpx solid #000;
		font-size: 90rpx;
		line-height: 40rpx;
		text-align: center;
		display: flex;
		justify-content: center;
	}

	.send {
		width: 110rpx;
		height: 70rpx;
		background-color: #19be6b;
		color: #fff;
		text-align: center;
		line-height: 70rpx;
	}

	.chat-container {
		box-sizing: border-box;
		padding: 20rpx;
	}

	.scroll {
		width: 100%;
		height: 90vh;
	}
</style>
